@{
    ViewData["Title"] = "文字识别(OCR)";
}

<partial name="_PartialLabPathNav" />

<style>
    #imgPreview {
        max-width: 100%;
        max-height: 100%;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-12 my-4">
            <div class="input-group">
                <span class="input-group-prepend">
                    <button class="btn btn-outline-primary" type="button" id="btnOcr"><i class="fa fa-search fa-fw"></i> 识别图片信息</button>
                </span>
                <input type="text" class="form-control" placeholder=" 输入图片链接，回车" id="image_url" value='https://aip.bdstatic.com/portal/dist/1515141530954/ai_images/technology/ocr-general/general/demo-card-8.png'>
            </div>
            <small class="form-text text-muted">URL长度不超过1024字节，URL对应的图片base64编码后大小不超过4M，最短边至少15px，最长边最大4096px,支持jpg/png/bmp格式</small>
        </div>
        <div class="col-md-6 fixedH">
            <img src="/favicon.svg" id="imgPreview" />
        </div>
        <div class="col-md-6">
            <textarea class="form-control min200" id="txtrt"></textarea>
        </div>
    </div>
</div>

<script>
    $('#imgPreview')[0].onerror = function () {
        this.src = "/favicon.svg";
    }

    $('#imgPreview')[0].src = $('#image_url').val();
    $('#image_url').on('input', function () {
        $('#imgPreview')[0].src = this.value;
    });

    $('#btnOcr').click(function () {
        $('#btnOcr')[0].disabled = true;
        $.ajax({
            url: "/lab/ocrapi",
            type: 'post',
            data: {
                image_url: $('#image_url').val()
            },
            dataType: 'json',
            success: function (data) {
                console.log(data);
                if (data.code == 200) {
                    data = data.data;
                    var vls = [];
                    $(data.words_result).each(function () {
                        vls.push(this.words);
                    });
                    $('#txtrt').val(vls.join('\r\n'));
                }
            },
            error: function (ex) {
                $('#txtrt').val(ex);
            },
            complete: function () {
                $('#btnOcr')[0].disabled = false;
            }
        })
    });
</script>